<template>
	<el-dialog v-model="visible" :title="'员工列表'" :close-on-click-modal="false">
		<el-form :inline="true" :model="state.queryForm" @keyup.enter="getDataList()">
			<el-form-item class="form-button-right">
				<el-button v-auth="'staff:staff:save'" type="primary" @click="adds()">批量添加</el-button>
			</el-form-item>

			<el-form-item label="职位">
				<el-select v-model="state.queryForm.zhiwei" clearable placeholder="请选择"></el-select>
			</el-form-item>
			<el-form-item label="部门">
				<el-select v-model="state.queryForm.bumen" clearable placeholder="请选择"></el-select>
			</el-form-item>
			<el-form-item>
				<KeyQuery v-model="state.queryForm.keyword" @getDataList="getDataList()"/>
			</el-form-item>
		</el-form>

		<el-table v-loading="state.dataListLoading" :data="state.dataList" border style="width: 100%" @selection-change="selectionChangeHandle">
			<el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
			<el-table-column prop="id" label="主键" header-align="center" align="center" v-if="false"></el-table-column>

			<el-table-column prop="name" label="头像/姓名" header-align="center" align="center"></el-table-column>
			<el-table-column prop="code" label="工号" header-align="center" align="center"></el-table-column>
			<el-table-column prop="organName" label="部门" header-align="center" align="center"></el-table-column>
			<el-table-column prop="positionName" label="职位" header-align="center" align="center"></el-table-column>
		</el-table>
		<el-pagination
			:current-page="state.page"
			:page-sizes="state.pageSizes"
			:page-size="state.limit"
			:total="state.total"
			layout="total, sizes, prev, pager, next, jumper"
			@size-change="sizeChangeHandle"
			@current-change="currentChangeHandle"
		>
		</el-pagination>
	</el-dialog>
</template>

<script setup lang="ts" name="StaffStaffIndex">
import { useCrud } from '@/hooks'
import { reactive, ref } from 'vue'
import { IHooksOptions } from '@/hooks/interface'
import { ElMessage, ElMessageBox } from 'element-plus'

import { addsRoleStaff } from '@/api/nb/organization/role'

const props = defineProps({
	roleId: {
		type: String,
		required: true
	}
})

const emit = defineEmits(['refreshDataList'])
const state: IHooksOptions = reactive({
	dataListUrl: '/nb/role_staff/pageStaff',
	deleteUrl: '/nb/staff',
	queryForm: {
	
	}
})
const visible = ref(false)

const init = () => {
	state.queryForm.roleId=props.roleId
	visible.value = true

	getDataList()
}

const adds = (key?: number | string) => {
	let data: any[] = []
	let adds: any[] = []

	if (key) {
		data = [key]
	} else {
		data = state.dataListSelections ? state.dataListSelections : []

		if (data.length === 0) {
			ElMessage.warning('请选择添加记录')
			return
		}
	}

	data.forEach(function (item, index) {
		adds.push({
			staffId: item,
			roleId: props.roleId
		})
	})

	ElMessageBox.confirm('确定进行批量添加?', '提示', {
		confirmButtonText: '确定',
		cancelButtonText: '取消',
		type: 'warning'
	})
		.then(() => {
			addsRoleStaff(adds).then(() => {
				ElMessage.success('批量添加成功')
				onClose: () => {
					visible.value = false
					emit('refreshDataList')
				}
			})
		})
		.catch(() => {})
}

const { getDataList, selectionChangeHandle, sizeChangeHandle, currentChangeHandle, deleteBatchHandle } = useCrud(state)

defineExpose({
	init
})
</script>
